<script setup lang="ts">
import { ArrowRight, Expand, Grid } from '@element-plus/icons-vue'
import { ref } from 'vue'
let eno = ref('')
let ename = ref('')
let dname = ref('')
const handleClick = () => {
    console.log('click')
}

const tableData = [
    {
        deptno: '101',
        dname: '商用软件事业部',
        empno: '1001',
        ename: '赵四',
        job: '工程师',
        method: '正常A班'
    },
    {
        deptno: '101',
        dname: '商用软件事业部',
        empno: '1001',
        ename: '赵四',
        job: '工程师',
        method: '正常A班'
    },
    {
        deptno: '101',
        dname: '商用软件事业部',
        empno: '1001',
        ename: '赵四',
        job: '工程师',
        method: '正常A班'
    },
    {
        deptno: '101',
        dname: '商用软件事业部',
        empno: '1001',
        ename: '赵四',
        job: '工程师',
        method: '正常A班'
    },
]

const options = [
    {
        value: '研发一部',
        label: '研发一部',
    },
    {
        value: '研发二部',
        label: '研发二部',
    }
]
</script>
<template>
    <div class="head">人员排班设定</div>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/i' }">时间管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/i' }">人员排班设定</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="body">
        <div class="l1">
            <div>员工编号
                <el-input v-model="eno" style="width: 240px" placeholder="Please input" clearable />&nbsp;
                姓名：
                <el-input v-model="ename" style="width: 240px" placeholder="Please input" clearable />&nbsp;
                部门：
                <el-select v-model="dname" placeholder="Select" size="large" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>&nbsp;
                <el-button type="primary">查询</el-button>
                <el-button type="primary">重置</el-button>
            </div>
        </div>
        <div class="l2">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column fixed prop="empno" label="编号" width="150" />
                <el-table-column prop="ename" label="姓名" width="120" />
                <el-table-column prop="job" label="职位" width="120" />
                <el-table-column prop="dname" label="部门" width="180" />
                <el-table-column prop="method" label="考勤方式" width="120" />
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default>
                        <el-button type="warning" round><el-icon>
                                <Plus />
                            </el-icon>修改</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<style scoped>
.l1 {
    line-height: 60px;
    width: 100%;
    height: 60px;
    border: 1px solid #000;
    padding: 10px;
}

.l2 {
    width: 100%;
    /* background-color: #111; */
    height: 76px;
    display: flex;
    justify-content: center;
    padding: 20px;

}

.head {
    height: 30px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    font-size: 30px;
    padding: 25px;
    color: #000;
}

.bread {
    height: 30px;
    background-color: rgb(215, 215, 215);
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: bottom;
}

.body {
    width: 100%;
    /* height: 100%; */
    background-color: rgb(255, 255, 255);
    padding: 0;
}
</style>